<!--
 * @Description:  长线课程 -- lineCourseList
 * @Author: your name
 * @Date: 2024-02-03
 * @LastEditTime: 2024-02-03
 * @LastEditors: Please set LastEditors
-->

<template>
  <div>
    <div class="lineCourseList heart_w">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item> 课程：Python精品体验课 </el-breadcrumb-item>
      </el-breadcrumb>

      <div class="muli_head">
        <img
          src="https://video.rycfa.com/image/default/A85E4137BAF949DA95D1AE49E3954D58-6-2.jpg"
          alt=""
        />
        <div class="headtext">
          <h3 :title="courseInfo.title">{{ courseInfo.title }}</h3>
          <p>课程有效期：{{ courseInfo.expirationtime }}</p>
          <p>
            视频：
            {{ courseInfo.video_count }}
            个&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;时长：
            {{ courseInfo.duration }}
          </p>
          <p class="intero" :title="courseInfo.descript">
            简介：{{ courseInfo.descript }}
          </p>
        </div>
      </div>

      <div class="downloadcon">
        <div class="down_left">
          <div
            class="download_zl"
            v-for="item in lineCourseList"
            :key="item.id"
          >
            <div class="lesson_title">
              <h6>{{ item.position }}.{{ item.name }}</h6>
              <img src="@/assets/images/downicon1.png" alt="" />
            </div>
            <div class="mulu_ul">
              <div
                class="mulu_title"
                v-for="(item_list, index) in item.list"
                :key="item_list.id"
                @click="itemListBtn(item_list, item)"
              >
                <div class="section_t">
                  （{{ index + 1 }}） {{ item_list.name }}
                  <img
                    src="@/assets/images/downicon.png"
                    alt=""
                    v-if="item_list.show_child"
                  />
                  <img src="@/assets/images/downicon1.png" alt="" v-else />
                </div>

                <div
                  class="mulu_href"
                  :class="{ muluactive: false }"
                  v-for="item_child in lineQusetion"
                  :key="item_child.id + item_child"
                  v-show="item_list.show_child"
                >
                  <img src="@/assets/images/icon_noplay.png" alt="" />
                  <strong> {{ item_child.title }} </strong>
                  <div class="right_play">
                    <el-button
                      type="danger"
                      :class="{ btn_active: true }"
                      @click="watchView(item_child.id)"
                    >
                      {{ item_child.button_text }}
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="down_right">
          <div
            class="watch_record eva_tea"
            style="margin-bottom: 10px; cursor: pointer"
          >
            <h6>师资评价</h6>
          </div>
          <div class="watch_record">
            <h6>观看记录</h6>
            <ul>
              <li v-for="(item, index) in viewingRecords" :key="item.id">
                <a href="#">
                  <p>1.{{ index + 1 }} - {{ item.title }}</p>
                  <p>
                    <span>{{ item.time }}</span>
                    <img src="@/assets/images/icon_noplay.png" alt="" />
                  </p>
                </a>
              </li>
            </ul>
          </div>

          <div class="live_recom">
            <h6>相关课程推荐</h6>
            <ul>
              <li v-for="item in courseRec" :key="item.id">
                <div class="les_img">
                  <img :src="item.image" alt="" />
                </div>

                <div class="les_info">
                  <h3>
                    <a href="">{{ item.title }}</a>
                  </h3>
                  <p>价格:{{ item.price }}</p>
                  <div class="bookmoney">
                    <small>{{ item.buy_nums }}人观看</small>
                    <a href="#">立即查看</a>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getChapter,
  getCourseList,
  getVideoLog,
  getComboInfo,
  getListByLike
} from '@/api/lineCourseList'
export default {
  name: 'lineCourseList',
  data() {
    return {
      lineCourseList: [],
      lineQusetion: [],
      viewingRecords: [], // 观看记录
      lineId: 1,
      courseInfo: {}, // 课程详情
      courseRec: [] //相关课程推荐
    }
  },
  created() {
    this.getlineList()
    console.log(this.$route.query)
  },
  methods: {
    getlineList() {
      let _that = this
      let position_num = 0
      getChapter({ id: _that.lineId }).then(({ data: data }) => {
        if (data.data.length && data.data.length > 0) {
          data.data.map((ele, index) => {
            position_num++
            if (ele.position) {
              ele.position = ele.position
            } else {
              ele.position = position_num
            }
            ele.list.map((it, i) => {
              if (it.show_child) {
                it.show_child = it.show_child
              } else {
                it.show_child = false
              }
              return it
            })
            _that.lineCourseList.push(ele)
            return ele
          })
          // console.log(_that.lineCourseList)
        }
      })

      getVideoLog({ page: 1, combo_id: this.lineId }).then(({ data: data }) => {
        _that.viewingRecords = data.data.list
      })

      getComboInfo({ combo_id: this.lineId }).then(({ data: data }) => {
        _that.courseInfo = data.data
      })

      // 相关课程推荐
      getListByLike({ combo_id: this.lineId }).then(({ data: data }) => {
        _that.courseRec = data.data
      })
    },
    itemListBtn(item, itemList) {
      // 手风琴模式
      if (item.show_child == false) {
        itemList.list.forEach((ele, index) => {
          ele.show_child = false
        })
        getCourseList({ id: item.id }).then(({ data: data }) => {
          this.lineQusetion = data.data
        })
      }
      item.show_child = !item.show_child
    },
    watchView(id) {
      this.$router.push({
        path: '/lineCourseList/course_play_cc2',
        query: {
          Id: id
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.el-breadcrumb {
  padding: 30px 5px 24px;
}

ul {
  list-style: none;
}

.muli_head {
  display: flex;
  height: 226px;
  border-radius: 10px;
  background-color: #fff;
  padding: 22px 0px 30px 20px;
  overflow: hidden;
  margin-bottom: 5px;
  box-sizing: border-box;

  img {
    display: block;
    width: 276px;
    height: 180px;
    border-radius: 5px;
  }

  .intero {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .headtext {
    display: block;
    width: 510px;
    margin-left: 26px;
    padding-top: 14px;

    h3 {
      color: #333;
      font-size: 18px;
      line-height: 30px;
      font-weight: 600;
    }

    p {
      color: #333;
      font-size: 14px;
      line-height: 32px;
    }
  }
}

.downloadcon {
  // display: flex;
  // justify-content: space-between;
  width: 100%;
  margin: 20px auto;
  overflow: hidden;

  .down_left {
    width: 834px;
    height: auto;
    float: left;
    // background-color: #fff;

    .download_zl {
      width: 100%;
      background-color: #fff;
      padding: 0 16px;
      box-sizing: border-box;
      margin-bottom: 20px;

      .mulu_ul {
        .muluactive {
          color: #ff6262;
        }

        .mulu_title {
          color: #333;
          cursor: pointer;
          font-size: 16px;
          position: relative;
          border-bottom: 1px solid #e6e6e6;

          .mulu_href {
            img {
              margin-right: 8px;
              width: 28px;
              height: 28px;
              display: inline-block;
              vertical-align: top;
              margin-top: 16px;
            }

            .right_play {
              float: right;

              span {
                margin-right: 30px;
              }

              .btn_active {
                background: #2a4c7e;
                border-color: #2a4c7e;
              }
              .el-button {
                margin: 0;
                padding: 5px;
                width: 70px;
                height: 28px;
                border-radius: 5px;
                text-align: center;
                color: #fff;
                font-size: 14px;
                margin-top: 18px;
              }
            }

            strong {
              font-weight: normal;
              width: 500px;
              display: inline-block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              line-height: 60px;
            }
          }

          .section_t {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 60px;
          }
          img {
            margin-right: 20px;
          }
        }
      }

      .lesson_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;

        img {
          margin-right: 20px;
        }
      }

      h6 {
        color: #333;
        font-size: 16px;
        height: 60px;
        line-height: 60px;
        font-weight: bold;
        cursor: pointer;
      }
    }
  }

  .down_right {
    width: 345px;
    float: right;
    // min-height: 600px;
    background-color: #fff;
    margin-left: 12px;

    .live_recom {
      width: 100%;
      background: #fff;
      float: right;
      box-shadow: #ddd 0 0 10px;
      margin-top: 20px;
      border-radius: 5px;

      li {
        height: 82px;
        margin: 14px 0;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .les_info {
        width: 190px;
        height: 100%;
        margin-right: 4px;
        margin-top: 4px;

        .bookmoney {
          text-align: right;
          overflow: hidden;
          margin-top: 5px;
          small {
            color: #666;
            float: left;
            line-height: 26px;
            font-size: 14px;
          }

          a {
            width: 70px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            color: #fff;
            display: inline-block;
            background: #bd0000;
            border-radius: 10px;
            border: 0;
            font-size: 12px;
          }
        }

        p {
          margin: 9px 0;
          font-size: 14px;
          color: #999;
        }

        h3 {
          color: #333;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 14px;
          font-weight: normal;
        }
      }

      .les_img {
        height: 100%;
        // position: relative;
        // float: left;

        img {
          width: 120px;
          height: 80px;
          border: 1px solid #999;
          display: inline-block;
        }
      }

      h6 {
        height: 62px;
        line-height: 62px;
        border-bottom: 1px solid #eaeaea;
        font-size: 16px;
        color: #333;
        text-indent: 20px;
      }
    }

    .watch_record {
      width: 100%;
      box-shadow: #ddd 0 0 10px;
      background-color: #fff;
      border-radius: 5px;

      h6 {
        height: 62px;
        line-height: 62px;
        border-bottom: 1px solid #eaeaea;
        text-indent: 21px;
        font-weight: 400;
        font-size: 16px;
        color: #333;
      }

      ul {
        li {
          height: 75px;
          border-bottom: 1px solid #eaeaea;
          padding: 15px 12px 15px;
          box-sizing: border-box;
          font-size: 14px;
          a {
            p:last-child {
              display: flex;
              align-items: center;
              justify-content: space-between;
            }

            img {
              width: 22px;
              height: 22px;
              right: 10px;
              bottom: 10px;
            }
          }
        }
      }
    }
  }
}
</style>
